<template>
	<view class="model-list">
		<Header title="我的资源" :showBack="true"></Header>
		<!-- 搜索栏 -->
		<!-- <uni-nav-bar :fixed="true" :border="false" color="#666666" background-color="#FFFFFF">
			<view class="serarch-con flex flex_grow">
				<uni-icons class="input-uni-icon" type="search" size="22" color="#666666" />
				<input confirm-type="search" class="search-input flex_grow" type="text" placeholder="输入模特信息" @confirm="confirm">
			</view>
		</uni-nav-bar> -->
		<!-- 列表数据 -->
		<com-scroller ref="refList"  :list="modelList" :listKey="listKey"  :queryModel="queryModel"   @getMore=getMore>
			<uni-swipe-action>
				<uni-swipe-action-item v-for="(item, index) in modelList" :key="index" :right-options="swipeOptions" @click="swipeClick($event, index)">
					<model-item :data="item" type="list" :isCollection="false" :ismyModel="false"></model-item>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</com-scroller>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import Header from '@/components/header.vue'
	import modelItem from '@/components/model-item/model-item.vue'
	export default {
		components: {
			modelItem,
			Header
		},
		computed:{
			...mapState(['uid'])
		},
		data() {
			return {
				fetch: '', // 列表接口
				listKey: 'modelList', // 列表请求返回的字段key
				queryModel: { // 请求列表参数
				},
				page: 0,
				reload: false,
				modelList: [], // 列表数据
				swipeOptions: [
					{
						text: '编辑',
						style: {
							backgroundColor: 'rgb(254,156,1)'
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: 'rgb(255,58,49)'
						}
					}
				],
			};
		},
		onLoad() {
			//getList
			this.getList()
		},
		methods: {
			// 获取列表数据
			async getList() {
				this.reload = true
				const res = await this.http.httpRequest('/user/myModels','post',{uid: this.uid, page: this.page})
				this.modelList = res.data.data
				this.reload = false
			},
			// 获取更多
			async getMore () {
				this.page++
				const res = await this.http.httpRequest('/user/myModels','post',{uid: this.uid, page: this.page})
				if (res.data.data.length == 0) {
					this.$u.toast('没有更多数据了')
					return
				}
				this.modelList = [...this.modelList, ...res.data.data]
			},
			// 左滑操作
			swipeClick(e, index) {
				let { content } = e;
				if (content.text === '删除') {
					uni.showModal({
						title: '提示',
						content: '是否确认删除',
						success: res => {
							if (res.confirm) {
								this.swipeList.splice(index, 1);
							}
						}
					});
				} else {
					uni.showToast({
						title: `点击了${e.content.text}按钮`,
						icon: 'none'
					});
				}
			}
		},
	};
</script>

<style lang="scss" scoped>
	.model-list {
		height: 100%;
	}
	.serarch-con {
		position: absolute;
		height: 72upx;
		margin: 8upx 0;
		padding: 0 30upx;
		line-height: 72upx;
		border-radius: 40upx;
		box-sizing: border-box;
		background-color: #f8f8f8;
		.search-input {
			height: 72upx;
			margin-left: 20upx;
			line-height: 72upx;
		}
	}
</style>